<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>设备管理</a-breadcrumb-item>
        <a-breadcrumb-item>高位相机视频</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <a-button
                  type="primary"
                  @click="changeVideo(500)"
                  style="margin-left: 200px;"
          >播放SN500近</a-button>
          <a-button
                  type="primary"
                  @click="changeVideo(501)"
                  style="margin-left: 200px;"
          >播放SN500远</a-button>
          <a-button
                  type="primary"
                  @click="changeVideo(800)"
                  style="margin-left: 200px;"
          >播放SN800</a-button>
<!--          <button @click="changeVideo(500)" style="margin-left: 200px;">播放SN500近</button>
          <button @click="changeVideo(501)" style="margin-left: 200px;">播放SN500远</button>
          <button @click="changeVideo(800)" style="margin-left: 200px;">播放SN800</button>-->
        </div>
      </div>
    </div>

    <!-- 表内容 -->
    <div class="box-table">

      <div style="width: 100%">
        <template>
          <div class="hello-ezuikit-js">
            <div id="video-container" style="width:70%;height:50%; margin:0 auto"></div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import EZUIKit from "ezuikit-js";
let player = null;
let tokenStr=null;
export default {
  name: "HelloWorld",
  // data:function () {
  //     return {
  //         player: null,
  //     }
  // },
  props: {
    msg: String
  },
  mounted: () => {
    console.group("mounted 组件挂载完毕状态===============》");
    $.ajax({
      url: 'https://open.ys7.com/api/lapp/token/get?appKey=d38dfcc11d9a48ebac3e6352909c8681&appSecret=edbed3e4d7e298b3b0407cdad163c58d',
      type: 'post',
      dataType: 'json',
      contentType: 'application/x-www-form-urlencoded',
      success: function (data) {
        if (data.code==="200"){
          tokenStr=data.data.accessToken;
          player =  new EZUIKit.EZUIKitPlayer({
            autoplay: true,
            id: "video-container",
            accessToken: tokenStr,
            url: "ezopen://open.ys7.com/G39373189/2.hd.live",
            template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
            // 视频上方头部控件
            //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
            //plugin: ['talk'],                       // 加载插件，talk-对讲
            // 视频下方底部控件
            // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
            // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
            // openSoundCallBack: data => console.log("开启声音回调", data),
            // closeSoundCallBack: data => console.log("关闭声音回调", data),
            //startSaveCallBack: data => console.log("开始录像回调", data),
            //stopSaveCallBack: data => console.log("录像回调", data),
            //capturePictureCallBack: data => console.log("截图成功回调", data),
            //fullScreenCallBack: data => console.log("全屏回调", data),
            // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
            width: 900,
            height: 500
          });
        }else {
          console.log("err 获取token失败",data);
        }
      },
      error: function(xhr, errorType, error) {
        alert('Ajax request error, errorType: ' + errorType +  ', error: ' + error)
      }
    });
  },
  methods: {
    changeVideo(sn) {
      let urlStr="ezopen://open.ys7.com/G39373189/2.hd.live";
      if (sn===800){
        urlStr="ezopen://open.ys7.com/G39373189/3.hd.live"
      }else if (sn ===501){
        urlStr="ezopen://open.ys7.com/G39373189/1.hd.live"
      }
      console.log("player",urlStr);
      player.stop().then(()=>{
                player.play({
                  id: "video-container",
                  accessToken: tokenStr,
                  url:urlStr,
                });
              });

      // setTimeout(()=>{
      //   player.play({
      //     url:"ezopen://open.ys7.com/244640009/1.live"
      //   })
      // },1000)
    },
  },
};
</script>

<style scoped>
/*组件样式*/
/*文本框*/
.ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}

.clickRowStyl {
  background-color: #c1e0fd;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 0;
}

.button_online {
  margin-left: 62px;
  display: flex;
}

.button_online button {
  margin-right: 10px;
}

.box-tool button {
  margin-right: 10px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
